// out: ../css/member3.css
@import url(base.less);
@import url(var.less);

body {
    background-color: @bg_color;
}

// 顶部
.nav {
    width: 100%;
    height: (44/@rem);
    display: flex;
    padding-left: (20/@rem);
    // line-height: (44/@rem);
    align-items: center;
    background-color: @text_white;
    position: sticky;
    top: 0;

    a {
        color: @text_black;
        font-size: (16/@rem);

        span {
            font-weight: 900;
        }
    }

    h2 {
        font-size: (16/@rem);
        color: @text_black;
        // font-weight: 700;
        margin-left: (128/@rem);
    }
}

// 会员权益页面
.member_benefits {
    width: (356/@rem);
    height: (436/@rem);
    background-color: @text_white;
    margin: (10/@rem) auto;

    .top {
        position: relative;
        width: (306/@rem);
        height: (131/@rem);
        margin: 0 auto;
        border-bottom: (0.5/@rem) solid @border_color;

        .left {
            font-size: (18/@rem);
            line-height: (25/@rem);
            color: @text_black;
            font-weight: 700;
            display: flex;
            position: absolute;
            left: 0;
            top: (44/@rem);


            .top_right {
                width: (72/@rem);
                height: (22/@rem);
                line-height: (22/@rem);
                border-radius: (5/@rem) (5/@rem) (5/@rem) 0;
                color: @text_yellow;
                font-size: (12/@rem);
                background-image: linear-gradient(to right, #4D4D4D 100%, #363636 100%);
                margin-left: (4/@rem);
                padding-left: (8.3/@rem);
                display: flex;

                .icon-qia {
                    display: block;
                    font-size: (16/@rem);
                    margin-bottom: (9.3/@rem);
                    margin-right: (5.7/@rem);
                    color: @text_yellow;
                }
            }
        }

        .bottom {
            position: absolute;
            top: (75/@rem);
            left: (2/@rem);
            font-weight: 700;

            a {
                font-size: (12/@rem);
                line-height: (17/@rem);
                color: @text_black ;

                .icon-a-fh3x {
                    font-size: (12/@rem);
                    color: @text_gray ;
                    padding-left: (7/@rem);
                }
            }

        }

        .right {
            img {
                width: (67/@rem);
                height: (67/@rem);
                border-radius: 50%;
                position: absolute;
                top: (35/@rem);
                right: (14/@rem);
            }

        }
    }

    // 中间部分
    .merry {
        height: (42/@rem);
        display: flex;
        overflow: hidden;
        margin-left: (30/@rem);

        a {
            width: (85/@rem);
            height: (42/@rem);
            margin-right: (10/@rem);
            text-align: center;
            line-height: (42/@rem);
            border: (1/@rem) solid @text_black;
            border-radius: (5/@rem);
            font-size: (14/@rem);
            font-weight: 700;

            .card {
                width: (85/@rem);
                height: (42/@rem);
            }

            &:nth-child(3) {
                color: @text_yellow;
                background-image: linear-gradient(to right, #4D4D4D 100%, #363636 100%);
            }


        }
    }

    // 底部
    .bt {
        margin-top: (41/@rem);
        margin-left: (33/@rem);
        padding-right: (23/@rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;

        .demo {
            text-align: center;
            margin-bottom: (31/@rem);
            margin-right: (40/@rem);

            &:nth-child(3) {
                margin-right: 0;
            }

            &:nth-child(4) {
                margin-right: (40/@rem);
            }

            &:nth-child(5) {
                margin-right: (50/@rem);
            }

            &:nth-child(6) {
                margin-right: 0;
            }

            img {
                width: (40/@rem);
                height: (30/@rem);
            }

            p {
                font-size: (12/@rem);
                line-height: (17/@rem);
                margin-top: (11/@rem);
            }
        }
    }

}

// 最底部
.bot {
    margin-top: (112/@rem);
    text-align: center;
}